<template>
  <el-dialog
    :title="title"
    :visible.sync="display"
    :before-close="handleClose"
  >
    <el-form
      :model="form"
      :rules="rules"
      label-width="100px"
      ref="form"
      class="form"
    >
      <el-form-item :label="$t('name')" prop="name">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      <!-- <el-form-item :label="$t('patch.tag')" prop="label">
        <el-input v-model="form.label" autocomplete="off"></el-input>
      </el-form-item> -->
      <el-form-item :label="$t('type')" prop="contentType">
        <el-select v-model="form.contentType" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('patch.address')" prop="url">
        <el-input v-model="form.url" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item :label="$t('description')" prop="description">
        <el-input
          type="textarea"
          v-model="form.description"
          autocomplete="off"
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button class="kylin-button" @click="handleOk">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { successOrError } from "@/utils";
import { addRepo, editRepo } from "@/api/patch";
export default {
  props: {
    display: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "",
    },
    detail: {
      type: Object,
      default: {},
    },
    repoId: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      showfileMessage: false,
      form: {
        name: "",
        description: "",
        contentType: "",
        url: "",
      },
      rules: {
        name: [
          {
            required: true,
            message: this.$t("patch.repo_name_require"),
            trigger: "change",
          },
        ],
        contentType: [
          {
            required: true,
            message: this.$t("patch.repo_os_require"),
            trigger: "change",
          },
        ],
      },
      options: [{ id: 0, name: "yum" }],
    };
  },
  watch: {
    detail: {
      handler(newName, oldName) {
        this.form = { ...newName };
      },
      deep: true,
    },
  },
  methods: {
    handleCancel() {
      this.resetForm();
      this.$emit("click");
    },
    handleOk() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          switch (this.type) {
            case "add_repo":
              addRepo({ id: this.$route.params.id, data: this.form }).then(
                (res) => {
                  successOrError.call(this, res);
                }
              );
              break;
            case "edit_repo":
              editRepo({
                id: this.$route.params.id,
                repoId: this.repoId,
                data: this.form,
              }).then((res) => {
                successOrError.call(this, res);
              });
              break;

            default:
              break;
          }
        }
      });
    },
    handleClose() {
      this.resetForm();
      this.$emit("click");
    },
    resetForm() {
      this.$refs.form.resetFields();
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.form {
  width: 80%;
  margin: 0 auto;
}
</style>